// 工区设施投入对比图 柱状图
import type { DatasetMatrixChartDataListType } from './typings'
import { defineComponent, reactive, onMounted, watch, markRaw } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts'
import styles from '~/pages/assetOverview/index.module.scss'

export default defineComponent({
  name: 'AssetOverViewBarChart',
  props: ['dataList', 'id'],
  setup(
    props: { dataList: any; id: string } = {
      dataList: [],
      id: 'contents'
    }
  ) {
    const store = useStore()
    const state = reactive<DatasetMatrixChartDataListType>({
      // 图表数据
      dataset: {
        source: []
      },
      barSeries: []
    })

    watch(
      () => props.dataList,
      () => {
        barInit()
      }
    )

    onMounted(() => {
      createBarInit()
    })

    // methods
    // 初始化echarts实例
    const createBarInit = async () => {
      const dom = document.getElementById(props.id)
      state.myChart = markRaw(echarts.init(dom!))

      state.dataset.source = [['product', '配电设施', '灯杆', '灯具']]
      const { code, data } = await store.dispatch('assetOverview/GetStreetTotalList')
      if (code === 200) {
        data.forEach((item: any) => {
          state.dataset.source.push([
            item.name,
            item.relDistribution,
            item.relLampPost,
            item.relLampBase
          ])
        })
        barInit()
      }
    }

    // 绘图
    const barInit = () => {
      // 绘制图表 柱宽不定

      state.myChart.clear()
      state.myChart.setOption({
        color: ['#c4a6ff', '#1cebd4', '#65afff'],
        legend: {
          // 小注释
          // itemHeight: 14,
          // itemWidth: 14,
          // icon: 'roundRect',
          // x: 'right',
          // y: 'top',
          top: 26
          // left: '12%'
        },
        grid: {
          // top: '20%',
          width: '88%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          enterable: true, // 鼠标是否可进入提示框浮层中
          hideDelay: 200, // 浮层隐藏的延迟
          confine: true, // 提示框 不限制必须在框内
          extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',
          textStyle: {
            fontSize: 12
          }
        },
        dataset: state.dataset,
        dataZoom: [
          {
            show: true,
            realtime: true,
            xAxisIndex: [0, 1]
          },
          {
            type: 'inside',
            realtime: true,
            xAxisIndex: [0, 1]
          }
        ],
        xAxis: {
          type: 'category'
        },
        yAxis: {},
        // barWidth: 33,
        series: [
          {
            barGap: 0,
            type: 'bar'
          },
          {
            type: 'bar'
          },
          {
            type: 'bar'
          }
        ]
      })

      // 建议加上以下这一行代码，不加的话，当浏览器窗口缩小时，超过div界限
      window.addEventListener('resize', function () {
        state.myChart.resize()
      })
    }

    return () => (
      <div class={styles['bar-chart']}>
        <div id={props.id} class={styles['statistics-map']}></div>
      </div>
    )
  }
})
